<script setup>
import * as Cesium from "cesium";
import { onMounted } from 'vue';
onMounted(async ()=>{
  const viewer = new Cesium.Viewer('cesiumContainer');
  const geoJson = await Cesium.GeoJsonDataSource.load('../public/china.json')
  viewer.dataSources.add(geoJson)
  const entity = viewer.entities.add({
    position:Cesium.Cartesian3.fromDegrees(116.39,39.91,400),
    point:{
      pixelSize:100,
      color:Cesium.Color.GREEN
    }
  })
  // 定义模型的坐标和大小
  // let modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
  //   Cesium.Cartesian3.fromDegrees(116.92177200317383,36.662946701049805),
  //   new Cesium.HeadingPitchRoll()
  // )
  // 定义模型路径等
  // let modeloptions = {
  //   uri: 'public/models/ChinaCities/Jinan/1.gltf',
  //   scale: 1,
  //   minimumPixelSize: 120,
  //   maximumScale: 20000,
  //   modelMatrix
  // }
  // 加载模型
  // viewer.scene.primitives.add(new Cesium.Model(modeloptions))
  // viewer.camera.setView({
  //   // destination:new Cesium.Cartesian3(1332761,-4662399,4137888),
  //   destination:new Cesium.Cartesian3.fromDegrees(117.015694,36.661212,12000000),
  //   // 方向和视角
  //   orientation:{
  //     heading:0,
  //     pitch:Cesium.Math.toRadians(-90),
  //     roll:0
  //   }
  // })
  viewer.camera.flyTo({
    destination:new Cesium.Cartesian3.fromDegrees(117.015694,36.661212,120000),
    orientation:{
      heading:0,
      pitch:Cesium.Math.toRadians(-90),
      roll:0
    },
    duration: 5
  })
})
</script>

<template>
  <div id="cesiumContainer"></div>
</template>

<style scoped>
#cesiumContainer{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>
